<template>
	<view class="pageBox">
		<view v-if="path=='/pages/index/index'">
			<Index ref="index" @userLogin="userLogin"></Index>
		</view>
		<view v-if="path=='/pages/statistics/statistics'">
			<Statistics ref="statistics" @userLogin="userLogin"></Statistics>
		</view>
		<view v-if="path=='/pages/experience/experience'">
			<Experience ref="experience" @userLogin="userLogin"></Experience>
		</view>
		<view v-if="path=='/pages/project/project'">
			<Project ref="project" @userLogin="userLogin"></Project>
		</view>
		<view v-if="path=='/pages/mine/mine'">
			<Mine ref="mine" @userLogin="userLogin"></Mine>
		</view>
		<tabbar @changTabBar='changTabBar' :path="path" :tabBarList="tabBarList"></tabbar>
		<Authorization v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></Authorization>
	</view>
</template>

<script>
	import Index from './index/index.vue'
	import Mine from './mine/mine.vue'
	import Experience from './experience/experience.vue'
	import Project from './project/project.vue'
	import Statistics from './statistics/statistics.vue'
	import Authorization from '@/components/authorization/authorization.vue'
	import {
		login,
		register,
		getUserInfo,
	} from "@/api/api.js"
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			Index,
			Mine,
			Experience,
			Project,
			Statistics,
			Authorization
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin'])
		},
		data() {
			return {
				loginCode: "", //登录code值
				// path: '/pages/project/project',
				path: '/pages/index/index',
				// path: '/pages/mine/mine',
				// path: '/pages/statistics/statistics',
				// path: '/pages/experience/experience',
				tabBarList: [],
				showAuthorizationModal: false,
				pageMethods: {
					'/pages/index/index': 'index',
					'/pages/statistics/statistics': 'statistics',
					'/pages/experience/experience': 'experience',
					'/pages/project/project': 'project',
					'/pages/mine/mine': 'mine',
				}, //页面配置
			}
		},
		onShow() {
			if (this.path in this.pageMethods) {
				this.callPageMethod.call(this, this.path); // 注意这里使用call来确保this上下文正确  
			}
			if (this.isLogin) {
				this.getUserInfo()
			}else{
				this.initData()
			}
		},
		onShareAppMessage() {
			return {
				title: "大创客节",
			};
		},
		onShareTimeline() {
			return {
				title: '大创客节',
			}
		},
		onHide() {
			if (this.path in this.pageMethods) {
				this.callPageMethod.call(this, this.path, "hide"); // 注意这里使用call来确保this上下文正确  
			}
		},
		destroyed() {
			if (this.path in this.pageMethods) {
				this.callPageMethod.call(this, this.path, "hide"); // 注意这里使用call来确保this上下文正确  
			}
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 0) {
						this.$store.commit('UPDATE_USERINFO', res.data);
					} else if (res.code == 401) {
						this.userLogin()
					}
					this.initData()
				})
			},
			userLogin() {
				let that = this
				uni.login({
					success(res) {
						login({
							code: res.code
						}).then(ress => {
							if (ress.msg == '用户不存在') {
								that.showAuthorizationModal = true
							} else {
								that.$store.commit('LOGIN', {
									token: ress.data.token
								});
								that.getUserInfo()
							}
						})
					}
				})
			},
			// 获取到的用户信息
			updatedUserInfoEvent(info) {
				// console.log('获取到的用户信息', info)
				let that = this
				uni.login({
					success(res) {
						register({
							code: res.code,
							nickname: info.nickname,
							avatar: info.avatar
						}).then(ress => {
							that.$Tips({
								title: "授权成功"
							})
							that.showAuthorizationModal = false
							setTimeout(() => {
								that.userLogin()
							}, 1000)
						})
					}
				})
			},
			callPageMethod(path, type = 'load') {
				const refName = this.pageMethods[path];
				if (refName) {
					this.$nextTick(() => {
						if (this.$refs[refName] && type == 'load') {
							this.$refs[refName].onLoadMethod();
						} else if (this.$refs[refName] && type == 'hide') {
							this.$refs[refName].onHideMethod();
						} else {
							console.error("加载组件" + refName + "失败")
						}
					});
				}
			},
			initData() {
				if (this.userInfo.type == 2) {
					this.tabBarList = [{
						"pagePath": "/pages/index/index",
						"iconPath": "../../static/tabbar/index.png",
						"selectedIconPath": "../../static/tabbar/index-active.png",
						"text": "直播"
					}, {
						"pagePath": "/pages/statistics/statistics",
						"iconPath": "../../static/tabbar/statistics.png",
						"selectedIconPath": "../../static/tabbar/statistics-active.png",
						"text": "统计"
					}, {
						"pagePath": "/pages/experience/experience",
						"iconPath": "../../static/tabbar/experience.png",
						"selectedIconPath": "../../static/tabbar/experience-active.png",
						"text": "体验"
					}, {
						"pagePath": "/pages/mine/mine",
						"iconPath": "../../static/tabbar/mine.png",
						"selectedIconPath": "../../static/tabbar/mine-active.png",
						"text": "我的"
					}]
				} else {
					this.tabBarList = [{
						"pagePath": "/pages/index/index",
						"iconPath": "../../static/tabbar/index.png",
						"selectedIconPath": "../../static/tabbar/index-active.png",
						"text": "直播"
					}, {
						"pagePath": "/pages/project/project",
						"iconPath": "../../static/tabbar/experience.png",
						"selectedIconPath": "../../static/tabbar/experience-active.png",
						"text": "体验"
					}, {
						"pagePath": "/pages/mine/mine",
						"iconPath": "../../static/tabbar/mine.png",
						"selectedIconPath": "../../static/tabbar/mine-active.png",
						"text": "我的"
					}]
				}

			},
			changTabBar(path) {
				this.path = path
				if (this.path in this.pageMethods) {
					this.callPageMethod.call(this, this.path); // 注意这里使用call来确保this上下文正确  
				}
			},
			tabbarPageScrollLower() {

			},
		}
	}
</script>
<style>
	page {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
</style>